<template>
	<view style="background: #F1F5FF;height: 100%;">
		
		<myHeadTab>我的组员</myHeadTab>
		
		<view style="height: 32rpx;width: 100%;"></view>
		
		<view style="width: 100%;height: 44rpx;display: flex;" >
		
			<view style="width: 32rpx;height: 100%;"></view>
			
			<template v-for="(group,index) in groupList" :key="index">
				<view >
					<view @click="selectTab = index">
						<text :class="[selectTab == index ? 'f1-active' : 'f1']">{{group.groupName}}</text>
						<view :class="[selectTab == index ? 'hr-top' : '']"></view>
					</view>	
				</view>
				
				<view style="width: 48rpx;height: 100%;" v-if="index != groupList.length - 1"></view>
			</template>
			
				
		</view>
		
		<view style="height: 32rpx;width: 100%;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动名称</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" style="position: relative;left: 16rpx;">{{groupList?.at(selectTab).groupActivity}}</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;width: 100%;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">组长</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" style="position: relative;left: 16rpx;">{{groupList?.at(selectTab).groupLeader}}</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;width: 100%;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">副组长</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" style="position: relative;left: 16rpx;">{{groupList?.at(selectTab).deputyLeader}}</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;width: 100%;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">联络员</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" style="position: relative;left: 16rpx;">{{groupList?.at(selectTab).linkName}}</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;width: 100%;"></view>
		
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 100%;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动成员</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 64rpx;padding-left: 32rpx;">
							<template v-for="(item,innerIndex) in groupList?.at(selectTab).groupMember" :key="innerIndex">
								<image  :src="item.avatar" style="width: 64rpx;height: 64rpx;border: 2rpx solid black;border-radius: 100%;margin-left: -26rpx;"></image>
							</template>
					</view>
					
					<view style="height: 20rpx;width: 100%;"></view>
					
					<view class="hr"></view>
					
					<view style="height: 14rpx;width: 100%;"></view>
					
					<uni-table style="width: 640rpx;">
						<uni-tr class="column-top">
							<uni-th class="f17" width="70">姓名</uni-th>
							<uni-th class="f17" width="82">所在单位</uni-th>
							<uni-th class="f17" width="68">职务</uni-th>
							<uni-th class="f17" width="92">联系电话</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in groupList?.at(selectTab).groupMember" :key="index">
							<uni-td>
								<view class="f18">
									{{ item.name }}
								</view>
							</uni-td>
							<uni-td>
								<view class="f18">
								{{ item.unit }}
								</view>
							</uni-td>
							<uni-td>
								<view class="f18">
									{{ item.job }}
								</view>
							</uni-td>
							<uni-td>
								<view class="f18">
									{{ item.phone }}
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
		
					
					
					
					
				</view>
			</uni-col>
		</uni-row>
		
			<view style="height: 24rpx;width: 100%;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: auto;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 29.42rpx;padding-right: 24rpx">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">最近的一条活动总结</text>
						
						<view style="height: 100%;width: 8rpx;"></view>
						
					
					</view>
					<view style="height: 20rpx;width: 100%;"></view>
					
					<view class="f15">
						{{groupList?.at(selectTab).activitySum.sumTitle}}
					</view>
					
					<view class="f10">
						{{groupList?.at(selectTab).activitySum.sumContent}}
					</view>
					
					<view style="height: 18rpx;width: 100%;"></view>
					
					<view class="hr"></view>
					
					<view style="height: 28rpx;width: 100%;"></view>
					
					
					<view style="display: flex;">
						<view>
							<image style="height: 64rpx;width: 64rpx;border-radius: 100%;border: 1px solid black;"></image>
							
						</view>
						
						
						<view style="height: 100%;width: 16rpx;"></view>
						<view style="position: relative;top: -10rpx;">
							<view style="display: flex;height: 40rpx;">
								
								<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
								<text class="f4" style="position: relative;left: 8rpx;">{{groupList?.at(selectTab).activitySum.sumTime}}</text>
								
													
							</view>
							<text class="f13" style="position: relative;left: 8rpx;">{{groupList?.at(selectTab).activitySum.name}}</text>
						</view>
						
					</view>
					
					
				</view>
			</uni-col>
		</uni-row>
		
	
		<view style="height: 32rpx;width: 100%;"></view>

		<button class="btn"><view class="f19">退出本组</view></button>
		
		<view style="height: 36rpx;width: 100%;"></view>
		
	</view>
</template>

<script setup>	

import myHeadTab from '../../component/myHeadTab/index.vue'	
import {onMounted, ref} from 'vue'
	
	const column = ref([
		'姓名','所在单位','职务','联系电话'
	])
	
	const selectTab = ref(0)
	
	const groupList = ref()
	
	const userId = ref(1)
	
	onMounted(()=>{
		uni.request({
			url:'/data/teamMember.json',
			data:{userId: userId.value},
			success(res) {
				groupList.value = res.data;
			}
		})
	})
	
	function handleColumnData(item,index){
		switch(index){
			case 1 :
			return item.name;
			case 2 :
			return item.unit
			case 3 :
			return item.job
			case 4 :
			return item.phone
		}
	}

</script>

<style>
	
	/deep/ .uni-table-th{
		padding: 0 !important;
		padding-left: 16rpx !important;
	}
	
	.f1-active{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		letter-spacing: 0;
	}
	
	.f1{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 32rpx;
		color: #5E5E5E;
		letter-spacing: 0;
	}
	
	.hr-top{
		width: 122rpx;
		height: 8rpx;
		background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
	}
	
	.hr2{
		width: 84rpx;
		height: 8rpx;
		background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
	}
	
.f3{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 46rpx;
}

.card{
	background: #FFFFFF;
	border-radius: 8px;
}

.f4{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;	
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f7{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.hr{
	width: 626.62rpx;
	height: 2rpx;
	border-top: 2rpx dotted #E6E6E6;
}
.f8
{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #94A6C8;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f10{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;
}
.f11{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f12{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f13{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 44.9rpx;
}
.f14{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}
.page video{
	height: 160rpx;
	width: 260rpx;
}
.mb{
	height: 160rpx;
	width: 260rpx;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
}
.f15{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.column-top{
	width: 614rpx;
	height: 60rpx;
	background: #F1F5FF;
	padding-left: 16rpx;
}
.f16{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
}
.f17{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	line-height: 60rpx;
}
.f18{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	background: #276EFF;
	border-radius: 16rpx;
}
.f19{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 80rpx;
}
</style>
